<template>
	<view>
		<view class="head">
			<view class="search">
				<image :src="baseurl+'/applet/common/fangda.png'" mode="widthFix"></image>
				<input type="text" confirm-type="search" @confirm="search" v-model="content" placeholder="搜索我的订单"
					placeholder-class="mo" />
			</view>
			<view class="state">
				<scroll-view scroll-x="true" class="scroll-view_H">
					<view :class="state==0?'s-title':'title'" @click="tab(0)">全部</view>
					<view :class="state==1?'s-title':'title'" @click="tab(1)">待付款</view>
					<view :class="state==2?'s-title':'title'" @click="tab(2)">待接单</view>
					<view :class="state==3?'s-title':'title'" @click="tab(3)">配送/自提</view>
					<view :class="state==4?'s-title':'title'" @click="tab(4)">待评价</view>
					<view :class="state==5?'s-title':'title'" @click="tab(5)">退款中</view>
					<view :class="state==6?'s-title':'title'" @click="tab(6)">已完成</view>
					<view :class="state==7?'s-title':'title'" @click="tab(7)">已取消</view>
					<view :class="state==8?'s-title':'title'" @click="tab(8)">已退款</view>
				</scroll-view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" @click="detail(item.id)">
			<view class="one">
				<view class="shop" @click.stop="shopIndex(item.shop_id)">
					<image :src="baseurl+'/applet/common/shop.png'" mode="widthFix"></image>
					<view>{{item.shopname}}</view>
					<image :src="baseurl+'/applet/common/newright.png'" mode="widthFix"></image>
				</view>
				<view class="state" v-if="item.status==1">待支付</view>
				<view class="state" v-if="item.status==2">待接单</view>
				<view class="state" v-if="item.status==3">配送/自提</view>
				<view class="state" v-if="item.status==4">待评价</view>
				<view class="state" v-if="item.status==5">退款中</view>
				<view class="state" v-if="item.status==6">已完成</view>
				<view class="state" v-if="item.status==7">已取消</view>
				<view class="state" v-if="item.status==8">退款成功</view>
			</view>
			<view class="two">
				<image :src="item.avatar" mode="aspectFill"></image>
				<view class="detail">
					<view class="time">下单：{{item.createtime}}</view>
					<view class="sbw">
						<view class="money">总价：￥{{item.actual_payment}}</view>
						<view class="num">共{{item.number}}件</view>
					</view>
				</view>
			</view>
			<view class="operate">
				<!-- 订单状态:1=待支付,2=待接单,3=配送/自提,4=待评论,5=退款中,6=已完成,7=已取消 8已退款 -->
				<block v-if="item.status==1">
					<view @click.stop="pay(item.order_no)">立即支付</view>
				</block>
				<block v-if="item.status==2">
					<view @click.stop="refund(item.id)">申请退款</view>
					<view @click.stop="call(item.shopmobile)">联系商家</view>
				</block>
				<block v-if="item.status==3">
					<view v-if="item.delivery_type=='express'" @click.stop="call(item.rider_mobile)">联系骑手</view>
					<view v-if="item.delivery_type=='pickup'">核销码</view>
					<view @click.stop="call(item.shopmobile)">联系商家</view>
				</block>
				<block v-if="item.status==4">
					<view @click.stop="evaluate(item.id)">去评价</view>
				</block>
				<block v-if="item.status==6">
					<view @click.stop="del(item.id)">删除订单</view>
					<view @click.stop="again(item.shop_id)">再来一单</view>
				</block>
				<block v-if="item.status==8">
					<view @click.stop="del(item.id)">删除订单</view>
					<view @click.stop="again(item.shop_id)">再来一单</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				page: 1,
				keywords: '',
				state: 0,
				list: [],
				content: ''
			};
		},
		onLoad(options) {

		},
		onHide() {
			uni.removeStorageSync('state');
		},
		onShow() {
			if(uni.getStorageSync('state')){
				this.state = uni.getStorageSync('state')
			}else{
				this.state = 0
			}
			this.page = 1
			this.list = []
			this.getData()
		},
		methods: {
			search(e) {
				console.log(e.detail.value)
				this.content = e.detail.value
				this.page = 1
				this.list = []
				this.getData()
			},
			tab(state) {
				this.state = state
				this.page = 1
				this.list = []
				this.getData()
			},
			pay(order_sn) {
				this.app.post('/api/order/pay_order', {
					order_sn: order_sn,
				}).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.pay_param.timeStamp,
						nonceStr: res.pay_param.nonceStr,
						package: res.pay_param.package,
						signType: res.pay_param.signType,
						paySign: res.pay_param.paySign,
						success: (res) => {
							console.log('success:' + res);
							uni.showToast({
								title: '支付成功',
								icon: "none"
							})
							setTimeout(() => {
								this.page = 1
								this.list = []
								this.getData()
							}, 1500)
						},
						fail: (err) => {
							console.log('fail:' + err);
							uni.showToast({
								title: '取消支付',
								icon: "none"
							})
						}
					});
				})
			},
			again(id) {
				uni.navigateTo({
					url: '/pages/sc/shaopIndex/shaopIndex?id=' + id
				})
			},
			refund(id) {
				uni.navigateTo({
					url: '/pages/sc/refund/refund?id=' + id
				})
			},
			evaluate(id) {
				uni.navigateTo({
					url: '/pages/sc/evaluate/evaluate?id=' + id
				})
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/sc/orderDetail/orderDetail?id=' + id
				})
			},
			shopIndex(id) {
				uni.navigateTo({
					url: '/pages/sc/shaopIndex/shaopIndex?id=' + id
				})
			},
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: String(tel)
				});
			},
			del(id) {
				this.app.post('/api/order/delete_order', {
					id: id,
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '删除成功',
						icon: "none"
					})
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.getData()
					}, 1500)
				})
			},
			getData() {
				this.app.post('/api/order/order_list', {
					state: this.state,
					keywords: this.content,
					page: this.page,
				}).then(res => {
					console.log(res)
					this.list = this.list.concat(res.data)
				})
			}
		},
		onReachBottom() {
			this.page += 1;
			this.getData();
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #EEFCEB;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.head {
		width: 750rpx;
		background-color: #FFFFFF;
		padding-top: 30rpx;

		.search {
			width: 690rpx;
			height: 70rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			background: #EFF0F2;
			margin-left: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 23rpx;
			}

			input {
				font-size: 24rpx;
				margin-left: 15rpx;
			}

			.mo {
				color: #8F8F8F;
			}
		}

		.state {
			width: 750rpx;
			display: flex;
			justify-content: space-around;

			.s-title {
				// width: 120rpx;
				line-height: 80rpx;
				border-bottom: 2px solid #84BD00;
				color: #84BD00;
				text-align: center;
				display: inline-block;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.title {
				// width: 120rpx;
				line-height: 80rpx;
				border-bottom: 2px solid #fff;
				display: inline-block;
				text-align: center;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}
	}

	.list {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 0;

		.one {
			width: 630rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;

			.shop {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				view {
					font-size: 26rpx;
					color: #333333;
					margin-left: 10rpx;
					margin-right: 10rpx;

				}
			}

			.state {
				font-size: 26rpx;
				color: #999999;
			}
		}

		.two {
			width: 630rpx;
			display: flex;
			margin-left: 30rpx;
			align-items: center;
			margin-top: 30rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
			}

			.detail {
				width: 490rpx;
				margin-left: 20rpx;

				.time {
					font-size: 26rpx;
					color: #666666;
				}

				.sbw {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 26rpx;

					.money {
						font-size: 26rpx;
						color: #666666;
					}

					.num {
						font-size: 26rpx;
						color: #666666;
					}
				}
			}
		}

		.operate {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 30rpx;

			view {
				width: 150rpx;
				height: 60rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid #84BD00;
				margin-left: 22rpx;
				color: #84BD00;
				font-size: 24rpx;
			}
		}
	}
</style>